<template>
  <section class="parentHeadLine">
		<div class="headline-content">
			<div id="layout">
				<div class="headline-tit">
					<h3>{{title}}</h3>
				</div>
				<div class="headline-labels" >
					<ul v-if="labels&&labels.length">
						<li v-for=" (item,index) in labels" :key='index'>{{item.name}}</li>
					</ul>
					<span class="watch">{{watch}}</span>
				</div>
				<div class="headline-article">
					<div class="article-content" v-html ="content"></div>
					<div class="article-time"><span>{{intime}}</span></div>
					<div class="like-info" @click='downLoad'><i :class="[liked ? 'liked':'unLiked']"></i><span>{{data.likeCount||0}}</span></div>
				</div>
				<div v-if='data.adMaterials' class="adContainer">
					<div v-for="(ad,index) in data.adMaterials" :key='"ad"+index' class="advertising" @click='advertisingGo(ad.hrefUrl)'>
						<img :src="ad.adIconUrl" :alt="ad.adName">
						<i>广告</i>
					</div>
				</div>
				<div class="pertinent" v-if='data.relatedReads&&data.relatedReads.length>0'>
					<span class="pertinentTitle">相关推荐</span>
					<ul >
						<li v-for='(read,index) in data.relatedReads' :key='"read"+index' :id='read.id' @click="downLoad">
							<div class="pertinentThumbnail">
								<img v-if="read.cover" :src="read.cover" alt="">
								<img v-else src="../../static/hello.png" alt="掌门好老师">
							</div>
							<div class="pertinentSynopsis">
								<p class="mainContent">{{read.title}}</p>
								<div class="subContent">
									<span class="topicTag">{{read.labelNames||''}}</span>
									<span class="watch">{{read.viewCount||0}}</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<downLoad :hasShare="hasShare"></downLoad>
		</div>
  </section>
</template>

<script>
import api from "../api";
import downLoad from "./../components/common/download/downLoad.vue";
export default {
	name: "parentHeadLine",
	components: {
		downLoad
	},
	data() {
		return {
			data: "",
			liked: false,
			questionType: null,
			hasShare: true,
			shareName: "升学头条",
			title: "",
			labels: [],
			watch: "",
			content: "",
			time: "",
			intime: "",
			intimeString: "",
			isAndroid: "",
			isiOS: "",
			weibo: "",
			appId: "wx921f8ebbe6ced2c2",
			wxSharePic:
				"https://static.shengxue985.com/oss/20180830/e5089c21aa9249e0bd121f7a7e21b582.png"
		};
	},
	created() {
		var u = navigator.userAgent;
		this.isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
		this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		this.openMachine(); //获取什么机型请求的页面
		if (this.isAndroid && this.weibo) {
			this.getReportResult(); //安卓的微博 要用https的接口
		} else if (this.isAndroid && !this.weibo) {
			this.getbbsAndroidHeadlines(); //安卓的非微博 安卓浏览器 要用http接口
		} else if (this.isiOS) {
			this.getReportResult(); // ios要用https接口
		} else {
			this.getReportResult(); // 网页浏览器用https接口
		}
		this.secondShare(true, {
			url: window.location.href,
			appId: this.appId // 必填，公众号的唯一标识
		});
	},
	methods: {
		//二次分享
		secondShare(hasData, params) {
			api
				.getSecondShareKey(params)
				.then(res => {
					if (res.data.code == 0) {
						let data = res.data.data;
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data.timestamp, // 必填，生成签名的时间戳
							nonceStr: data.nonceStr, // 必填，生成签名的随机串
							signature: data.signature, // 必填，签名，见附录1
							jsApiList: [
								"chooseImage",
								"previewImage",
								"uploadImage",
								"downloadImage",
								"checkJsApi",
								"onMenuShareTimeline",
								"onMenuShareAppMessage",
								"onMenuShareQQ",
								"onMenuShareWeibo"
							] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						this.wxShare(hasData, {
							title: this.title || "邀您查看话题详情", // 分享标题
							desc: this.content || "升学在线,学习超给力", // 分享描述
							link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
							imgUrl: this.wxSharePic, // 分享图标
							type: "", // 分享类型,music、video或link，不填默认为link
							dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
							success: function() {
								// 用户确认分享后执行的回调函数
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数
							}
						});
					} else {
					}
				})
				.catch(err => {
				});
		},
		wxShare(hasData, config) {
			let c;
			if (!hasData) {
				c = {};
				c.title = "邀您查看话题详情";
				c.desc = "升学在线,学习超给力";
				(c.link = window.location.href), (c.imgUrl = this.wxSharePic);
			} else {
				c = config;
			}
			if (location.hash == "#debug") {
				alert(JSON.stringify(c));
			}
			wx.ready(function() {
				wx.onMenuShareAppMessage(c);
				wx.onMenuShareTimeline(c);
				wx.onMenuShareQQ(c);
				wx.onMenuShareWeibo(c);
			});
		},
		getReportResult() {
			const params = {
				mobile: "",
				tid: this.$route.query.tid
			};
			api
				.getbbsHeadlines(params)
				.then(res => {
					if (res.data.code == 0) {
						this.data = res.data.data;
						this.liked = !!this.data.liked;
						this.title = res.data.data.title;
						this.labels = res.data.data.labels;
						this.watch = res.data.data.viewCount;
						this.content = res.data.data.content;
						this.intimeString = new Date(res.data.data.inTime);
						const year = this.intimeString.getFullYear();
						let month = this.intimeString.getMonth() + 1;
						month = month > 9 ? month : "0" + month;
						const day =
							this.intimeString.getDate() > 9
								? this.intimeString.getDate()
								: "0" + this.intimeString.getDate();
						const hh =
							this.intimeString.getHours() > 9
								? this.intimeString.getHours()
								: "0" + this.intimeString.getHours();
						const mm =
							this.intimeString.getMinutes() > 9
								? this.intimeString.getMinutes()
								: "0" + this.intimeString.getMinutes();
						// var ss = this.intime.getSeconds();
						this.intime = year + "-" + month + "-" + day + " " + hh + ":" + mm;
					}
				})
				.catch(err => {
				});
		},
		getbbsAndroidHeadlines() {
			const params = {
				tid: this.$route.query.tid
			};
			api
				.getbbsAndroidHeadlines(params)
				.then(res => {
					if (res.data.code == 0) {
						this.data = res.data.data;
						this.title = res.data.data.title;
						this.labels = res.data.data.labels;
						this.watch = res.data.data.viewCount;
						this.content = res.data.data.content;
						this.intimeString = new Date(res.data.data.inTime);
						const year = this.intimeString.getFullYear();
						let month = this.intimeString.getMonth() + 1;
						month = month > 9 ? month : "0" + month;
						const day =
							this.intimeString.getDate() > 9
								? this.intimeString.getDate()
								: "0" + this.intimeString.getDate();
						const hh =
							this.intimeString.getHours() > 9
								? this.intimeString.getHours()
								: "0" + this.intimeString.getHours();
						const mm =
							this.intimeString.getMinutes() > 9
								? this.intimeString.getMinutes()
								: "0" + this.intimeString.getMinutes();
						this.intime = year + "-" + month + "-" + day + " " + hh + ":" + mm;
					}
				})
				.catch(err => {
				});
		},
		openMachine() {
			var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				//在微信中打开
			}
			if (ua.match(/WeiBo/i) == "weibo") {
				this.weibo = true;
				//在新浪微博客户端打开
			}
			if (ua.match(/QQ/i) == "qq") {
				//在QQ空间打开
			}
		},
		downLoad() {
			window.location = "http://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am";
		},
		advertisingGo(adUrl) {
			if (this.data.adMaterials) {
				window.location = adUrl;
			} else {
				this.downLoad();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";
.parentHeadLine {
	width: px2rem(720);
	margin: 0 auto;
	// height: 100%;
	background: #f4f5f7;
	overflow: hidden;
}
.headline-content {
	display: block;
	width: 100%;
	height: 100%;
	// overflow: scroll;
	position: relative;
	#layout {
		width:px2rem(720);
		.headline-tit {
			background: #fff;
			padding: px2rem(32) px2rem(35) px2rem(15);
			h3 {
				font-size: px2rem(36);
				line-height: px2rem(50);
				color: #333333;
				word-break: keep-all;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.headline-labels {
			clear: both;
			overflow: hidden;
			width: 100%;
			background: #fff;
			padding: 0 px2rem(35) px2rem(35);
			border-bottom: px2rem(1) solid #e6e6e6;
			box-sizing: border-box;
			font-size: px2rem(24);
			color: #999999;
			ul {
				float: left;
				li {
					float: left;
					padding: 0 px2rem(15);
				}
			}
			.watch {
				float: right;
				padding: 0 0 0 px2rem(40);
				background: url('../assets/image/parentHeadline/watch@2x.png') no-repeat
					center left;
				background-size: px2rem(28) px2rem(17);
			}
		}
		.headline-article {
			// overflow: scroll;
			min-height: px2rem(830);
			position: relative;
			background: #fff;
			padding: 0 px2rem(35) px2rem(68);
			margin-bottom: px2rem(20);
			.article-content {
				font-size: px2rem(28);
				color: #333333;
				line-height: px2rem(42);
				background: #fff;
				padding: px2rem(40) 0 0;
				// padding-bottom: px2rem(200);
				// overflow-x: hidden;
				// overflow-y: scroll;
				p {
					word-break: break-all;
					white-space: pre-wrap;
				}
			}
			.article-time {
				color: #cccccc;
				margin: px2rem(20) auto px2rem(68);
				text-align: right;
				span {
					font-size: px2rem(24);
				}
			}
		}
	}
}
.like-info {
	width: px2rem(240);
	height: px2rem(80);
	margin: 0 auto;
	text-align: center;
	border: px2rem(2) solid #cccccc;
	border-radius: px2rem(40);
	box-sizing: border-box;
	i {
		display: inline-block;
		width: px2rem(32);
		height: px2rem(32);
		margin-right: px2rem(8);
		margin-top: px2rem(22);
		vertical-align: top;
	}
	.liked {
		background: url('../assets/image/parentHeadline/liked@x3.png') center center
			no-repeat;
		background-size: 100%;
	}
	.unLiked {
		background: url('../assets/image/parentHeadline/unliked@x3.png') center center
			no-repeat;
		background-size: 100%;
	}
	span {
		line-height: px2rem(76);
		font-size: px2rem(32);
		color: #ccc;
	}
}
.adContainer {
	width: px2rem(720);
	background: #fff;
	overflow: hidden;
}
.advertising {
	position: relative;
	background: #fff;
	margin: px2rem(40) px2rem(30);
	font-size: 0;
	height: px2rem(152);
	overflow: hidden;
	img {
		 width: 100%;
	}
	img,
	i {
		display: inline-block;
	}
	i {
		position: absolute;
		top: 0;
		right: 0;
		width: px2rem(62);
		height: px2rem(26);
		opacity: 0.5;
		background: #000000;
		font-size: px2rem(21);
		color: #ffffff;
		text-align: center;
		line-height: px2rem(26);
		font-style: normal;
	}
}
.pertinent {
	padding-bottom: px2rem(140);
	background: #fff;
	.pertinentTitle {
		display: inline-block;
		margin: 0 0 px2rem(12) px2rem(30);
		font-size: px2rem(30);
		line-height: px2rem(42);
		color: #333333;
	}
	li {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		align-items: stretch;
		-webkit-align-items: stretch;
		padding: px2rem(26) px2rem(30) 0;
		.pertinentThumbnail {
			width: px2rem(216);
			height: px2rem(128);
			margin-bottom: px2rem(26);
			overflow: hidden;
			box-sizing: border-box;
			img {
				width: 100%;
			}
		}
		.pertinentSynopsis {
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			flex-wrap: nowrap;
			-webkit-flex-wrap: nowrap;
			justify-content: space-between;
			-webkit-justify-content: space-between;
			align-items: center;
			-webkit-align-items: center;
			padding-bottom: px2rem(26);
			border-bottom: 1px solid #eee;
			.mainContent {
				width: px2rem(414);
				font-size: px2rem(30);
				line-height: px2rem(42);
				color: #333333;
				word-break: break-all;
				white-space: pre-wrap;
			}
			.subContent {
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				-webkit-flex-wrap: nowrap;
				justify-content: space-between;
				-webkit-justify-content: space-between;
				align-items: center;
				-webkit-align-items: center;
				width: 100%;
				.topicTag {
					font-size: px2rem(24);
					line-height: px2rem(34);
					color: #999999;
				}
				.watch {
					padding: 0 0 0 px2rem(36);
					background: url('../assets/image/parentHeadline/watch@2x.png') no-repeat
						center left;
					background-size: px2rem(28) px2rem(17);
					font-size: px2rem(24);
					line-height: px2rem(34);
					color: #ccc;
				}
			}
		}
	}
}
</style>
<style lang="scss">
.article-content {
	p {
		margin: 0 !important;
		word-break: break-all;
		white-space: pre-wrap;
	}
}
</style>
